import React from 'react';
import styles from './style.styl';
import echarts from 'echarts';
import 'echarts-wordcloud';
import util from '../../util';

class Charts extends React.Component {
  constructor(props) {
    super(props);
    this.displayName = 'Charts';
  }
  componentDidMount() {
    this.myChart = echarts.init(this.refs.echart); 
    this.buildOption();
    if(this.props.onClick){
      this.myChart.on('click',this.props.onClick);
    }
  }
  componentWillReceiveProps(nextProps) {
    this.buildOption(nextProps);
  }
  shouldComponentUpdate(nextProps) {
    return util.isShallowEqual(this.props, nextProps);
  }
  buildOption = (props) => {
    const prop = props || this.props;
    const {
      title,
      type,
      series = [],
      tooltip,
      xAxis = {},
      yAxis,
      grid,
      data,
    } = prop;
    const option = {
      title: {
          text: title,
      },
      tooltip,
      grid: grid|| {
        top: 70,
        left: 50,
        right: 40,
        bottom: 40,
      },
    };
    if(type === 'wordCloud'){
      const _series = series;
      _series.data = typeof series.value === 'function' ? series.value(data) : series.value;
      _series.rotationRange = [0, 0];
      _series.type = type;
      _series.textStyle = {
          normal: {
              padding: 5,
              color: function() {
                  return 'rgb(' + [
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160)
                  ].join(',') + ')';
              }
          },
          emphasis: {
              shadowBlur: 10,
              shadowColor: '#333'
          }
      };
      option.series = [_series];
      this.myChart.setOption(option);
      return;
    }
    const legend = {
      left: 'right',
      top: 30,
      data: [],
      ...this.props.legend,
    }
    let _series = [];
    if(type !== 'pie'){
      _series = series.map(v => ({name: v.name, type: type, barMaxWidth:80, data: []}));
    } else {
      _series = [{
        type: 'pie',
        radius : '55%',
        center: ['50%', '50%'],
        data: [],
      }]
    }
    xAxis.data = [];
    legend.data = series.map(v => v.name);
    for(let i = 0, length = data.length; i < length; i++){
      const item = data[i];
      if(type !== 'pie'){
        xAxis.data.push(typeof xAxis.value === 'function' ? xAxis.value(item) : xAxis.value);
        _series.map((v, i) => v.data.push({
          value: typeof series[i].value === 'function' ? series[i].value(item) : series[i].value,
          item: item,
        }));
      }else{
        _series[0].data = series.map(k => ({
          value: typeof k.value === 'function' ? k.value(item) : k.value,
          name: k.name,
        }))
      }
    }
    option.legend = legend;
    option.series = _series;
    if(type !== 'pie'){
      option.xAxis = xAxis;
      option.yAxis = yAxis;
    }
    this.myChart.setOption(option);
  }
  render() {
    const {
      width,
      height,
      style = {},
    } = this.props;
    return (
      <div className={styles['layout']} style={{width: `${width}px`, height: `${height}px`,...style}}>
        <div ref={'echart'} style={{width: `${width-40}px`, height: `${height-40}px`}} ></div>
      </div>
    );
  } 
}
 
export default Charts;
